In the last tutorial we have created everything we need to render our MailChimp form and also to subscribe our users. In this tutorial we will create a simple MailChimp widget. This widget will render our form in any sidebar we place it.
This tutorial is part of a series MailChimp WordPress Plugin with React:
- MailChimp WordPress Plugin with React: Introduction
- MailChimp WordPress Plugin with React: Settings & Custom Post Type
- MailChimp WordPress Plugin with React: Metabox & MailChimp Lists
- MailChimp WordPress Plugin with React: The Form and Form Submission
- MailChimp WordPress Plugin with React: MailChimp Widget
- MailChimp WordPress Plugin with React: AJAX and React
Before we create our widget, we will need a helper function to list all the available forms. Why? We need it so that we can create a simple dropdown when configuring our widget and setting a single form to be used in it.
That way we can have many MailChimp widgets with different forms and thus subscribe users to different lists (with different welcoming emails).
The Helper Function
We will name our helper function mwp_get_all_forms. Open our file inc/funcitons-form.php and add this:
In this function we are using the get_posts function to retrieve all the forms that are published.
MailChimp Widget
Let’s now create our widget to display the MailChimp forms. Create a new file class-mwp-widget.php in the inc folder. Put this code first:
Here we defined just a constructor method that will create this widget in the WordPress dashboard with the informations provided. This method is also used when rendering the widget on the front side of our site. Let’s now create a form for our MailChimp widget that will be rendered and used in dashboard.
MailChimp Widget Fields
The variable $instance holds all the data for the widget we are currently viewing. Since there can be MailChimp Widgets as many as we want, each of them holds unique data for their instance. This is an array with all the data.
We are using the function mwp_get_all_forms() to get all the forms. The selected form ID is stored in $instance. If there is no form ID, the variable $form_id will be empty since the widget was just placed in the dashboard and there is no data yet.
After all variables are set, we are creating the fields for every variable we are using. When creating the dropdown of all our forms, we are iterating through all the forms and also use the function selected to create the attribute selected="selected" on the selected option.
Saving the fields
All those fields have to be saved in the database so that we can then also use them on the front side.
In the method update() we have two variables $new_instance and $old_instance. The variable $new_instance is holding the new data that was entered before hitting save.
In this method we can make some checks between old and new but for this tutorial that is not needed. At the end, we are returning an array $instance with all the new (or old) data.
Rendering the MailChimp Widget
The last part of our widget is to render it. This is done in the method widget().
We are repeating the process of setting variables from $instance array. If variable $form_id does not contain any ID, the widget will not render. Otherwise, we are rendering all the data and also the form by using a function mwp_render_form(). We created this function in the last tutorial.
Including the MailChimp Widget
Since now we have done everything for our MailChimp widget, we have to include this file in our main plugin class. This is done in the method includes():
Registering the MailChimp Widget
Registering widgets in WordPress is consisted of two parts. The widget is registered by using the function register_widget. This function needs to be called in an action hook widgets_init.
Let’s add that hook in the method hooks:
We are hooking a method register_widgets that is defined inside our main plugin class:
Conclusion
In this tutorial we have now learned how to create a WordPress Widget. We have used the default Widget skeleton for creating any WordPress widget. By using our defined functions for working with forms, we can easily display the form on the front side and also list forms in the WordPress dashboard.
Go now and render those forms! 🙂
Become a Sponsor
Share this: